<template>
  <div class="wraper">
    <article>
      <p id="text">
        <template v-for="i in values">{{i.name}},</template>
      </p>
    </article>
  </div>
</template>

<script>
  import animetion from "@/assets/js/animation"
  import {
    setInterval,
    setTimeout
  } from 'timers';
  export default {
    props: {
      values: {
        default: [
          {name: "张三"},
          {name: "李四"},
          {name: "王五"},
          {name: "赵六"},
          {name: "刘七"},
          {name: "钱多"},
          {name: "思聪"},
        ]
      }
    },
    data() {
      return {
        list:[]
      }
    },
    mounted() {
      var anime = new animetion.Gravity("text");
      console.log("anime:" + JSON.stringify(anime));
      setInterval(() => {
        anime.update();
      }, 5);
    },
    methods: {}
  };
</script>

<style scoped>
  .wraper {
    height: 100%;
    width: 100%;
  }
  article {
    width: 80%;
    margin: auto;
  }
  #text{
    font-size: 26px;
    font-weight: bold;
  }
</style>
